import userEvent from '@testing-library/user-event'
import React, { useEffect, useState } from 'react'
import { Grid } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
import './index.scss'
//
import axios from 'axios'
//
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import hezu from '../../public/img/hezu.png'
import zhengzu from "../../public/img/zhengzu.png"
import dingwei from "../../public/img/dingwei.png"
import chuzu from "../../public/img/quchuzu.png"
export default function Index() {
  const [colors, setColor] = useState([])
  const [swiperList, setswiperList] = useState([])
  const [navBar, setNavBar] = useState([])
  const [ground, setGround] = useState([])
  const navigate = useNavigate();
  useEffect(() => {
    axios.get('/home/swiper').then(res => {
      let { data } = res
      setswiperList(data.body)
    })
    // 租房小组
    axios.get('/home/groups').then(res => {
      console.log("租房小组", res)
      let { data } = res
      setGround(data.body)
    })
  }, [])
  useEffect(() => {
    setNavBar([
      {
        id: 1,
        title: "整租",
        ico: zhengzu,
        path: '/home/todo'
      },
      {
        id: 2,
        title: "出租",
        ico: chuzu,
        path: '/home/todo'
      },
      {
        id: 3,
        title: "定位",
        ico: dingwei,
        path: '/map'
      },
      {
        id: 4,
        title: "合租",
        ico: hezu,
        path: '/home/list'
      }
    ])
  }, [])
  const jumpPath = (path) => {
    navigate(path)
  }
  return (
    <div>
      <div className='new swiperFather'>
        <Swiper
          spaceBetween={50}
          slidesPerView={3}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
        >
          {

            swiperList.length > 0 && swiperList.map((item, index) => {
              return <SwiperSlide key={item.id}>
                <img className='swiperImg' src={`http:localhost:8080${item.imgSrc}`}></img>
              </SwiperSlide>
            })
          }
        </Swiper>
      </div>
      <div className='navBar'>
        {
          navBar.map((item) => {
            return <ul key={item.id} onClick={() => { jumpPath(item.path) }}>
              <li className="navIco">
                <img src={item.ico}></img>
              </li>
              <li className='navTitle'>{item.title}</li>
            </ul>
          })
        }
      </div>
      <div className='ground'>
        <div className='groundtitle'>
          <h3>租房小组</h3>
          <span>更多</span>
        </div>
        <div className='ground-list'>
          <Grid columns={2} gap={8}>
            {
              ground.map((item) => {
                return <Grid.Item key={item.id}>
                  <div className='grid-demo-item-block'>
                    <div>
                      <p>{item.title}</p>
                      <span>{item.desc}</span>
                    </div>
                    <div></div>
                  </div>
                </Grid.Item>
              })
            }
          </Grid>
        </div>
      </div>
    </div>
  )
}
